<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-07 14:48:25
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2024-12-31 16:44:38
 * @FilePath: \crm\pagesecharts\index\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="content-index">
    <u-navbar-index :bgColor="navbarbgColor" :backgroundImage="backgroundImage">
      <template #left>
        <!-- {{ backgroundImage }} -->
        <view>
          <u-tabs
            :lineColor="lineColor"
            :list="list1"
            @click="click"
            :current="current"
            :activeStyle="activeStyle"
            :inactiveStyle="inactiveStyle"
          ></u-tabs>
        </view>
      </template>
      <!-- v-if="current == 0" -->
      <!-- <template #right>
        <text style="font-size: 26rpx; color: #dc2626">新建</text>
      </template> -->
    </u-navbar-index>

    <!-- 12+22.5+12 = 46.5 -->
    <swiper class="swiper" circular :current="current" @change="swiperchange">
      <swiper-item>
        <scroll-view class="scrollView" scroll-y="true">
          <view1 v-if="current === 0"></view1>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view class="scrollView" scroll-y="true">
          <view class="bj"></view>
          <!-- <view2 v-if="current === 1"></view2> -->
        </scroll-view>
      </swiper-item>
    </swiper>
    <tabbar></tabbar>
  </view>
</template>

<script>
import view1 from "./components/view1.vue";
// import view2 from "./components2/view1.vue";
export default {
  components: {
    view1,
    // view2,
  },
  data() {
    return {
      list1: [
        {
          name: "工作台",
        },
        // {
        //   name: "监控台",
        // },
      ],
      current: 0,
    };
  },
  computed: {
    navbarbgColor() {
      return this.current === 0 ? "#fff" : "#DC2626";
    },
    lineColor() {
      return this.current === 0 ? "#DC2626" : "#fff";
    },
    backgroundImage() {
      return this.current === 0
        ? `url(${this.$z.imgsrc("home-header.png")})`
        : "none";
    },
    inactiveStyle() {
      return this.current === 0
        ? {
            fontSize: "32rpx",
            color: "#838589",
          }
        : {
            fontSize: "32rpx",
            color: "#fff",
          };
    },
    activeStyle() {
      return this.current === 0
        ? {
            fontSize: "32rpx",
            fontWeight: "bold",
          }
        : {
            fontSize: "32rpx",
            fontWeight: "bold",
            color: "#fff",
          };
    },
  },
  mounted() {},
  methods: {
    click(item) {
      this.current = item.index;
      console.log(item);
    },
    // leftClick(){
    // 	uni.navigateTo({
    // 		url:"/pages/calendar/calendar"
    // 	})
    // },
    swiperchange(item) {
      console.log(item);
      this.current = item.detail.current;
    },
  },
};
</script>
<style lang="scss" scoped>
.content-index {
  display: flex;
  flex-direction: column;
  // #ifdef MP-WEIXIN
  height: calc(100vh);
  // #endif
  // #ifndef MP-WEIXIN
  // - 120rpx
  height: calc(100vh);
  // #endif

  .swiper {
    flex: 1;

    .scrollView {
      height: 100%;
      background: #f2f4f5;
    }
  }
}

.bj {
  position: fixed;
  // z-index: -1;
  height: 193px;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(#dc2626, #f2f4f5);
}
</style>
